//@flow

/**
 * 
 */
import React, { Component } from 'react';
import { 
    View,
    Text,
    Image,
    TouchableHighlight,
    StyleSheet,
 } from 'react-native';
import { Props as SettingProps, SettingList } from "./settingList";
import { 
    WhiteSpace, List, WingBlank,
 } from "antd-mobile-rn";
import { SettingItem } from './settingItem';
import { NavBar } from '../../container/navBar';
import { SEP_LINE_COLOR } from '../../util/constant/ui';


export class Setting extends Component {
    /**渲染每一行 */
    renderItems(data:Array<SettingProps>){
        return (
            <View style={{backgroundColor: SEP_LINE_COLOR,}}>
                <WhiteSpace />
                {
                    data.map(item=>{
                        return <SettingItem {...item}/>
                    })
                }
            </View>
        )
    }
    /**渲染注销按钮 */
    renderLogout(){
        return (
            <TouchableHighlight style={styles.logoutBtn}
                                underlayColor='rgb(180,180,180)'
                                onPress={()=>{

                                }}>
                <View>
                    <Text>注销</Text>
                </View>
            </TouchableHighlight>
        )
    }
    render(){
        return (
            <View style={styles.constainer}>
                <NavBar titleView="设置中心"/>
                <List>
                    {
                        SettingList.map(item=>{
                            return this.renderItems(item)
                        })
                    }
                </List>
                <WhiteSpace />
                {this.renderLogout()}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    constainer:{
        backgroundColor: SEP_LINE_COLOR,
        flex: 1,
    },
    logoutBtn : {
        alignItems:'center',
        justifyContent: 'center',
        padding: 20,
        backgroundColor:'white'
    }
})